
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'UIIcon' })

defineProps({
  // [width, height, path]
  icon: propTypes.array.def(undefined)
})
</script>

<template>
  <div class="ui-icon">
    <svg
      v-if="!!icon"
      aria-hidden="true"
      class="ui-svg-icon"
      role="img"
      xmlns="http://www.w3.org/2000/svg"
      :viewBox="'0 0 ' + (icon[0] || 0) + ' ' + (icon[1] || 0)"
    >
      <path fill="currentColor" :d="icon[2] as string || ''" /></svg
    ><i></i>
  </div>
</template>

 
<style>
.ui-icon {
  display: inline-block;
  text-align: center;
}
.ui-icon svg:not(:root).ui-svg-icon {
  overflow: visible;
  display: inline-block;
  font-size: inherit;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.ui-icon > i {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0;
}
</style>

